<template>
  <a-modal 
    :visible="visible"
    okText="选择" 
    cancelText="关闭"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    width="500px"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <a-tree-select
        allowClear
        style="width:200px"
        :replaceFields="{children:'children', title:'groupName', key:'id', value: 'id' }"
        v-model="group"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="groupList"
        placeholder="请选择"
        tree-default-expand-all
        >
        <span slot="title" slot-scope="{ key, value }">
            {{ value }}
        </span>
    </a-tree-select>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible:{
      type:Boolean,
      default:false,
    }
  },
  computed: {
    title () {
      return '选择商品分组'
    },
    userInfo(){
      return this.$store.getters.userInfo || {};
    }
  },
  data () {
    return {
        columns:[
            { title: 'groupName', dataIndex: 'groupName', key: 'groupName' },
        ],
        dataSource:[],
        groupList:[],
        group:'',
    }
  },
  watch: {
    
  },
  created(){
    this.getGroupList();
  },
  mounted () {
  },
  methods: {
    async getGroupList(){
      let res=await this.$get('/goods/group/tree',{
        shopId:this.userInfo.shopId
      })
      if(res && res.returnCode=='1000'){
        this.groupList=res.dataInfo || [];
      }
    },
    handleSubmit () {
      console.log(this.group)
      this.$emit('submit',this.group);
    },
    
    closeModal (freshTable) {
      this.$emit('cancel', freshTable)
    }
  }
}
</script>